<template>
    <div class="main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- 状态选择 -->
            <el-select v-model="formInline.state" style="width: 100px">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="正常" value="正常"></el-option>
                <el-option label="在线" value="在线"></el-option>
                <el-option label="离线" value="离线"></el-option>
                <el-option label="维修" value="维修"></el-option>
                <el-option label="停用" value="停用"></el-option>
                <el-option label="欠费" value="欠费"></el-option>
            </el-select>

            <!-- 类型选择 -->
            <el-select v-model="formInline.type" placeholder="请选择" style="width: 100px">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="车牌号" value="车牌号"></el-option>
                <el-option label="设备号" value="设备号"></el-option>
                <el-option label="公司名" value="公司名"></el-option>
                <el-option label="品牌" value="品牌"></el-option>
                <el-option label="型号" value="型号"></el-option>
                <el-option label="运营路线" value="运营路线"></el-option>
                <el-option label="司机名称" value="司机名称"></el-option>
                <el-option label="车辆类型" value="车辆类型"></el-option>
                <el-option label="SIM卡号" value="SIM卡号"></el-option>
                <el-option label="车队" value="车队"></el-option>
            </el-select>

            <el-form-item label="">
                <el-input v-model="formInline.searchContent" placeholder="请输入模糊查询内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">所有车辆</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dels">批量删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-form-item>
        </el-form>

        <hr />

        <div class="box">
            <el-table
                ref="multipleTable"
                :data="tableData"
                stripe
                height="520px"
                @selection-change="handleSelectionChange"
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="操作"
                width="150">
                <template slot-scope="scope">
                    <el-button @click="editCar(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="handDelete(scope.row.id)">删除</el-button>
                </template>
                </el-table-column>
                <el-table-column
                type="index"
                width="55">
                </el-table-column>
                <el-table-column
                prop="carP"
                label="车牌号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="SIM"
                label="SIM卡号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="parkC"
                label="车牌颜色"
                width="100">
                </el-table-column>
                <el-table-column
                prop="equipment"
                label="设备号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="sequence"
                label="设备序列号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="lastT"
                label="最后上线时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="installD"
                label="安装日期"
                width="180">
                </el-table-column>
                <el-table-column
                prop="expireD"
                label="服务到期时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="state"
                label="状态"
                width="120">
                </el-table-column>
                <el-table-column
                prop="company"
                label="所属公司"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fleet"
                label="车队"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="驾驶员姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="region"
                label="地域"
                width="180">
                </el-table-column>
                <el-table-column
                prop="management"
                label="经营范围"
                width="180">
                </el-table-column>
                <el-table-column
                prop="licence"
                label="道路许可证"
                width="180">
                </el-table-column>
                <el-table-column
                prop="check"
                label="核发机关"
                width="180">
                </el-table-column>
                <el-table-column
                prop="legal"
                label="法人"
                width="180">
                </el-table-column>
                <el-table-column
                prop="link"
                label="法人联系电话"
                width="180">
                </el-table-column>
                <el-table-column
                prop="address"
                label="法人地址"
                width="180">
                </el-table-column>
                <el-table-column
                prop="route"
                label="运营路线"
                width="120">
                </el-table-column>
                <el-table-column
                prop="carC"
                label="车辆颜色"
                width="120">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[8, 16, 24, 32]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 添加车辆 -->
        <el-dialog
            title="添加车辆"
            :visible.sync="dialogVisible"
            width="800px"
            :before-close="handleClose">
            <el-form :model="pojo" :inline="true" ref="pojoForm" label-width="120px" label-posion="right" :rules="rules">
                <el-form-item label="车牌号" prop="carP">
                    <el-input v-model="pojo.carP"></el-input>
                </el-form-item>
                <el-form-item label="车辆颜色" prop="carC">
                    <el-input v-model="pojo.carC"></el-input>
                </el-form-item>
                <el-form-item label="所属公司/车队" prop="company">
                    <el-input v-model="pojo.company" placeholder="请选择" readonly @click.native="dialogCompanyVisible=true"></el-input>
                </el-form-item>
                <el-form-item label="车牌颜色" prop="parkC">
                    <el-select v-model="pojo.parkC">
                        <el-option label="蓝牌" value="蓝牌"></el-option>
                        <el-option label="黄牌" value="黄牌"></el-option>
                        <el-option label="黑牌" value="黑牌"></el-option>
                        <el-option label="白牌" value="白牌"></el-option>
                        <el-option label="绿牌" value="绿牌"></el-option>
                        <el-option label="黄绿牌" value="黄绿牌"></el-option>
                        <el-option label="黄绿牌FJ" value="黄绿牌FJ"></el-option>
                        <el-option label="白绿牌FJ" value="白绿牌FJ"></el-option>
                        <el-option label="农黄牌" value="农黄牌"></el-option>
                        <el-option label="农绿牌" value="农绿牌"></el-option>
                        <el-option label="渐变绿牌" value="渐变绿牌"></el-option>
                        <el-option label="无" value="无"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="司机" prop="drive">
                    <el-input v-model="pojo.drive"></el-input>
                </el-form-item>
                <el-form-item label="车辆类型" prop="type">
                    <el-input v-model="pojo.type"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="linkM">
                    <el-input v-model="pojo.linkM"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="linkP">
                    <el-input v-model="pojo.linkP"></el-input>
                </el-form-item>
                <el-form-item label="设备号" prop="no">
                    <el-input v-model="pojo.no"></el-input>
                </el-form-item>
                <el-form-item label="终端类型" prop="terminalT">
                    <el-select v-model="pojo.terminalT">
                        <el-option label="定位终端" value="定位终端"></el-option>
                        <el-option label="视频终端" value="视频终端"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="SIM卡号" prop="SIM">
                    <el-input v-model="pojo.SIM"></el-input>
                </el-form-item>
                <el-form-item label="序列号" prop="number">
                    <el-input v-model="pojo.number"></el-input>
                </el-form-item>
                <el-form-item label="通道参数" prop="passagewayP" v-if="pojo.terminalT == '视频终端'">
                    <el-select v-model="pojo.passagewayP">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pojo.id === null ? addCar(pojo) : onSubmitMessageByCar(pojo)">保存</el-button>
            </div>
        </el-dialog>

        <!-- 选择公司 -->
        <el-dialog title="选择公司" :visible.sync="dialogCompanyVisible" width="500px">
            <company-list @option-company="optionCompany" :isDialog="true"></company-list>
        </el-dialog>
    </div>
</template>

<script>
import operateApi from "@/api/operate"
import {export_json_to_excel} from '@/public/Export2Excel'
import carListApi from "@/api/carList"
import CompanyList from '@/views/companyList'

export default {
    components: {CompanyList},

    data() {
      return {
        formInline: {
          searchContent: '',
          state: '全部',
          type: '全部'
        },
        tableData: [],
        multipleSelection: [],
        currentPage: 4,
        total: 32,
        pageSize: 8,
        dialogVisible: false,
        dialogCompanyVisible: false, //选择公司
        pojo: {
            id: null,
            carP: '',
            carC: '',
            company: '',
            parkC: '黄牌',
            drive: '',
            type: '',
            linkM: '',
            linkP: '',
            no: '',
            terminalT: '视频终端',
            SIM: '',
            number: '',
            passagewayP: '4'
        },
        rules: {
            carP: [
                {required: true, message: '车牌号不能为空', trigger: 'blur'}
            ],
            company: [
                {required: true, message: '所属公司不能为空', trigger: 'blur'}
            ],
            type: [
                {required: true, message: '车辆类型不能为空', trigger: 'blur'}
            ],
            no: [
                {required: true, message: '设备号不能为空', trigger: 'blur'}
            ],
        }
      }
    },

    created() {
        this.getCarList()
    },

    methods: {
        // 导出Excel表格
        exportExcel(){
            require.ensure([], () => {
            const tHeader = ['车牌号', 'SIM卡号', '车牌颜色', '设备号', '设备序列号', '最后上线时间', '安装日期', '服务到期时间', '状态', '所属公司', '车队', '驾驶员姓名', '地域', '经营范围', '道路许可证', '核发机关', '法人', '法人联系电话', '法人地址', '运营路线', '车辆颜色']
            const filterVal = ['carP', 'SIM', 'parkC', 'equipment', 'sequence', 'lastT', 'installD', 'expireD', 'state', 'company', 'fleet', 'name', 'region', 'management', 'licence', 'check', 'legal', 'link', 'address', 'route', 'carC']
            const list = this.tableData
            const data = this.formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '车辆列表')
            })
        },
        formatJson(filterVal, jsonData){
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

        // 批量删除操作
        // 将选中车辆写入
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 删除车辆
        deleteCar(id){
            carListApi.deleteById(id).then(response => {
                const resp = response.data
                if(resp.flag){
                    this.$message({
                        message: resp.message,
                        type: 'success'
                    })
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
        },

        // 删除车辆操作
        handDelete(id){
            this.$confirm('确认删除这条记录吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            }).then(() => {
                console.log('确认')
                this.deleteCar(id)
            }).catch(() => {
                console.log('取消')
            })
        },

        // 执行批量删除
        dels() {
            const delArr = []
            const arr = this.multipleSelection
            if(arr.length == 0){
                this.$message({
                    message: '无选中操作',
                    type: 'warning'
                })
            }else{
                this.$confirm('确认删除选中记录吗？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                }).then(() => {
                    console.log('确认')
                    for(var i=0; i<arr.length; i++){
                        this.deleteCar(arr[i].id)
                    }
                }).catch(() => {
                    console.log('取消')
                })
            }
            
        },

        // 添加车辆
        handleAdd(){
            this.pojo.id = null
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.pojoForm.resetFields()
            })
        },

        // 添加车辆
        addCar(form){
            this.$refs.pojoForm.validate(valid => {
                if(valid){
                    carListApi.addCar(form).then(response => {
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                }else{
                    return false
                }
                this.dialogVisible = false
            })
        },

        // 编辑车辆
        editCar(val){
            console.log(val)
            this.handleAdd()
            carListApi.getCarById(val.id).then(response => {
                const resp = response.data
                if(resp.flag){
                    const respD = resp.data
                    this.pojo.id = respD.id
                    this.pojo.carP = respD.carP
                    this.pojo.carC = respD.carC
                    this.pojo.company = respD.company
                    this.pojo.parkC = respD.parkC
                    this.pojo.drive = respD.drive
                    this.pojo.type = respD.type
                    this.pojo.linkM = respD.linkM
                    this.pojo.linkP = respD.linkP
                    this.pojo.no = respD.no
                    this.pojo.terminalT = respD.terminalT
                    this.pojo.SIM = respD.SIM
                    this.pojo.number = respD.number
                    this.pojo.passagewayP = respD.passagewayP
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
            this.dialogVisible = true
        },

        // 提交车辆修改
        onSubmitMessageByCar(form){
            this.$refs.pojoForm.validate(valid => {
                if(valid){
                    carListApi.updateCar(form).then(response => {
                        const resp = response.data
                        if(resp.flag){
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                    this.dialogVisible = false
                }else{
                    return false
                }
            })
        },

        // 获取车辆信息
        getCarList(){
            const token = localStorage.getItem('seeto-token').token
            operateApi.getOperateCar(token, this.currentPage, this.pageSize, this.formInline).then(response => {
                const resp = response.data
                if(resp.flag){
                    this.tableData = resp.data.rows
                    this.total = resp.data.total
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    })
                }
            })
        },

        // 关闭对话框
        handleClose(done) {
            // this.$confirm('确认关闭？')
            // .then(_ => {
                done();
            // })
            // .catch(_ => {});
        },

        optionCompany(currentRow){
            console.log('paren', currentRow)
            console.log(currentRow.company)
            this.pojo.company = currentRow.company
            this.dialogCompanyVisible = false
        },

        onSubmit() {
            console.log('submit!');
            this.getCarList()
        },

        // 改变每页条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getCarList()
        },

        // 改变当前页码
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getCarList()
        },
    }
}
</script>

<style scoped>
.el-select{
    margin-right: 10px;
}
hr{
    padding: 0;
    margin: 0;
}
.box{
    height: 570px;
    width: 1170px;
    /* background-color: pink; */
    overflow-x: auto;
    overflow-y: auto;
}

.block{
    margin-top: 10px;
}
</style>